<div column class="deployment-donut">
  <div row>
    <div column>
      <pod-donut
          pods="pods"
          desired="getDesiredReplicas()"
          idled="isIdled"
          ng-click="viewPodsForDeployment(rc)"
          ng-class="{ clickable: (pods | hashSize) > 0 }">
      </pod-donut>

      <!-- Add a link for screen readers. -->
      <a href=""
         class="sr-only"
         ng-click="viewPodsForDeployment(rc)"
         ng-if="(pods | hashSize) > 0"
         role="button">
         View pods for {{rc | displayName}}
      </a>
    </div>

    <!-- Don't show the scaling controls until the HPAs load so they don't appear and quickly disappear. -->
    <div
      column
      class="scaling-controls fade-inline"
      ng-if="(hpa && !hpa.length) && (rc | canIScale) && !isIdled">
      <div>
        <a href=""
           ng-click="scaleUp()"
           ng-class="{ disabled: !scalable }"
           ng-attr-title="{{!scalable ? undefined : 'Scale up'}}"
           ng-attr-aria-disabled="{{!scalable ? 'true' : undefined}}">
          <i class="fa fa-chevron-up"></i>
          <span class="sr-only">Scale up</span>
        </a>
      </div>
      <div>
        <!-- Remove the title when disabled because the not-allowed styled cursor overlaps the tooltip on some browsers. -->
        <a href=""
           ng-click="scaleDown()"
           ng-class="{ disabled: !scalable || getDesiredReplicas() === 0 }"
           ng-attr-title="{{(!scalable || getDesiredReplicas() === 0) ? undefined : 'Scale down'}}"
           ng-attr-aria-disabled="{{(!scalable || getDesiredReplicas() === 0) ? 'true' : undefined}}"
           role="button">
          <i class="fa fa-chevron-down"></i>
          <span class="sr-only">Scale down</span>
        </a>
      </div>
    </div>
  </div>

  <div row ng-if="hpa.length" class="scaling-details">
    <div>
      Autoscaled:
      <span class="nowrap">min: {{hpa[0].spec.minReplicas || 1}},</span>
      <span class="nowrap">
        max: {{hpa[0].spec.maxReplicas}}
        <span ng-if="hpaWarnings"
              dynamic-content="{{hpaWarnings}}"
              data-toggle="popover"
              data-trigger="hover"
              data-html="true"
              class="pficon pficon-warning-triangle-o hpa-warning"
              aria-hidden="true">
        </span>
      </span>
    </div>
  </div>
  <div
    class="scaling-details"
    ng-if="isIdled && (!getDesiredReplicas())">
    <div ng-if="(!resuming)">
      <span>Idled due to inactivity.</span>
      <a
        href=""
        ng-click="unIdle()">Start {{hpa[0].spec.minReplicas || 1}} pod{{ (hpa[0].spec.minReplicas || 1) > 1 ? 's' : ''}}</a>
    </div>
  </div>
</div>
